<template>
  <div class="login-page">
    <div class="wrapper">
      <div class="left">
        <img src="../../assets/images/login_banner.png" height="380" alt="login_banner" />
      </div>

      <div class="form-wrapper">
        <div class="brand">
          <img src="../../assets/images/logo1.svg" width="45" mr-15 alt="logo" />
          {{ title }}
        </div>
        <a-form :model="loginInfo" @finish="handleLogin">
          <a-form-item name="userName">
          <div class="form-item">
            <a-input
              v-model:value="loginInfo.userName"
              autofocus
              type="text"
              class="input"
              placeholder="请输入用户名"
              @keydown.enter="handleLogin"
            >
            <template #prefix>
                <user-outlined type="user" />
              </template>
            </a-input>
          </div>
         </a-form-item>
         <a-form-item>
          <div class="form-item">
            <a-input
              v-model:value="loginInfo.passWord"
              type="password"
              class="input"
              placeholder="请输入密码"
              @keydown.enter="handleLogin"
            >
            <template #prefix>
                <lock-outlined  type="password" />
              </template>
            </a-input>
          </div>
        </a-form-item>
         <a-form-item>
          <div class="form-item">
            <a-input
              v-model:value="loginInfo.vcode"
              type="text"
              class="input-captcha"
              placeholder="请输入验证码"
              @keydown.enter="handleLogin"
            >
              <template #prefix>
                <security-scan-outlined type="captcha"/>
              </template>
            </a-input>
            <div>
              <img
                :src="randCodeData.randCodeImage"
                @click="handleChangeCheckCode"
                class="captcha" />
            </div>
          </div>
        </a-form-item>
         <a-form-item>
          <div class="form-item">
            <a-button type="primary" class="submit-btn" html-type="submit">登录</a-button>
          </div>
        </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, unref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { UserOutlined, LockOutlined, SecurityScanOutlined } from '@ant-design/icons-vue';

import { login, getCaptcha } from '@/api/auth';
import { storage } from '@/utils/Storage';
import { setToken } from '@/utils/token';
import { useUserStore } from '@/store/modules/user'

const title = import.meta.env.VITE_APP_TITLE

const router = useRouter()
const query = unref(router?.currentRoute).query

let loading = $ref(false);

const loginInfo = reactive({
  userName: 'admin',
  passWord: 'Pass@123',
  vcode: '',
});

const randCodeData = reactive({
  randCodeImage: '',
  requestCodeSuccess: false,
  checkKey: 0,
});

const lsLoginInfo = storage.get('loginInfo')
if (lsLoginInfo) {
  loginInfo.userName = lsLoginInfo.userName || ''
  loginInfo.passWord = lsLoginInfo.passWord || ''
}

async function handleLogin() {
  const { userName, passWord, vcode } = loginInfo;
  console.log('login....', loginInfo, userName, passWord, vcode);
  if (!userName || !passWord) {
    // $message.warning('请输入用户名和密码')
    return
  }
  try {
    // $message.loading('正在验证...')
    const res = await login({ userName, passWord, vcode, uuid: randCodeData.checkKey })
    if (res.code === 200) {
      // $message.success('登录成功')
      storage.set('loginInfo', { userName, passWord })
      // setToken(res.data.token);

      if (query?.redirect) {
        const path: any = query?.redirect
        Reflect.deleteProperty(query, 'redirect')
        router.push({ path, query })
      } else {
        router.push('/')
      }
    } else {
      // $message.warning(res.message)
      handleChangeCheckCode();
    }
  } catch (error) {
    handleChangeCheckCode();
    // $message.error(error.message)
  }
}

const handleChangeCheckCode = () => {
    randCodeData.checkKey = new Date().getTime();
    getCaptcha(randCodeData.checkKey).then((res:any) => {
      randCodeData.randCodeImage = res.image;
    });
    loading = false;
  };
  //初始化验证码
  onMounted(() => {
    handleChangeCheckCode();
  });
</script>

<style lang="less" scoped>
  @import "./index.less";
</style>
